Building iOS Applications with Cordova CLI

Description

A quick guide for creating iOS applications with Cordova CLI using Xcode.

Generating the Build Script

  1. On the Web Projects Control Panel, launch the Cordova Builder.

  2. In the Cordova Build Project Settings, set App Build Target to CLI

  3. Check the iOS property.

  4. Select the Initial UX Component and configure the URL for All Ajax Callbacks. The Ajax Callback URL is only required if you have server-side code (i.e. Xbasic) that is called from your application. See Publishing Resources to the Application Server for instructions on publishing resources to the Application Server.

    images/ios_cli1.png
  5. Add any additional assets your application requires, including Additional Files Required or SQLite Databases. If you plan on using Instant Update or Firebase Authentication, enable and configure those features.

  6. If this is the first time you are building the Cordova CLI application, or want to update your image resources for the application, check Generate Image Resource Files. Then, check Generate iOS Storyboard Launch Images and set the Master Icon and iOS Storyboard Launch Image properties.

  7. Set the Application Id, Version, Application Name, Description, App Author, App Email, and App Info Link and any other settings required by your application.

  8. Make sure Alpha WkWebView Engine is checked.

    images/ios_cli2.png
  9. Add any additional plugins required by your application.

  10. Click Save & Launch Cordova CLI Builder when you are done setting up the Cordova Build Project Settings.

    images/ios_cli3.png
  11. Set the Target Project Build Folder. This is where the CLI build files will be generated for your application.

  12. Check Generate iOS Build Script.

    images/ios_cli4.png
  13. Click Build App to generate the files. Note where the files were saved. You will need it later in this guide.

Publishing Resources to the Application Server

If your app does any server-side processing, you must publish the required components and files to Alpha Cloud or a server running the Alpha Anywhere Application Server.

You may skip this section if your application does not make Ajax Callbacks to the Application Server.
  1. If you do not have an existing publishing profile, create a publishing profile for the Application Server where your project files will be hosted. Go to Web > Project Settings > Add New Profile. Select the type of Application Server you have and step through the genie to create the profile.

    images/create_profile.png
  2. Configure the SameSite Cookie Policy on the Application Server. The SameSite Cookie policy must be set to "Unset".

    If you are publishing to the Application Server for IIS or Alpha Cloud, the SameSite Cookie Policy is configured in the Web Project Properties.

    If you are publishing to the Standalone Application Server or Development Server (testing only), the SameSite policy is set on the Advanced tab of the Application Server settings.

    images/samesite_cloudIIS.png
    SameSite Cookie Policy is set in the Web Project Properties for IIS and Alpha Cloud
    images/samesite_classic.png
    SameSite Cookie Policy is set on the Advanced tab for the standalone Application Server

    This step may require access to the server running the Application Server.

  3. From the Web Projects Control Panel, click Publish in the toolbar or select Publish Project under the Web menu.

  4. Select the Publishing Profile for the server that will host your application files.

  5. Publish all components and files required by your application to the server.

Building the iOS Application with Xcode

  1. Navigate to where the Cordova CLI Build Script was created.

    images/ios_cliBuild1.png
    The Build Script is created within a folder in the Target Project Build Folder, specified in the Cordova CLI Builder
  2. Copy the files to a location that can be accessed from the Mac you plan to use to build your iOS application. This can be a third-party service such as Google Drive or DropBox, a server, or other location that can be accessed from both the Mac and your Alpha Anywhere Development machine.

  3. Copy the files from the location where they were uploaded to your Mac machine. The Mac can be a physical machine that you own or hosted through a third-party service such as MacInCloud (MacInCloud).

    images/ios_cliBuild2.png
  4. Open Terminal (Apple) on the Mac.

    If you do not know where Terminal is located, use Spotlight (Apple) to find Terminal:

    • 1. Click the magnifying glass icon in the upper right-hand corner (to the right of the clock).

      images/ios_cliBuild9.png
    • 2. Enter "terminal" in the Spotlight Search box

      images/ios_cliBuild3.png
    • 3. Select Terminal from the list of search results

      images/ios_cliBuild8.png
  5. In Terminal, use the cd command to navigate to the directory where the build script is saved. For example, if you put the build script in the Documents folder in a folder called "MyBuildScript", you would enter the following:

    cd ~/Documents/MyBuildScript
    Make sure you are in the same folder as the build.sh file.
  6. Run the build script to generate an Xcode workspace by entering the following command in Terminal:

    bash build.sh
    images/ios_cliBuild4.png
    Navigate to the folder where the build script is stored and run the script
  7. In Finder, locate the generated files and open the Xcode project. The Xcode project will be located inside the platforms/ios directory and has the file extension .xcworkspace. For example, if your application was named "myapp", the Xcode project will be located in the same location as the build.sh file at:

    myapp/platforms/ios/myapp.xcworkspace

    Double-click the file to open the Xcode project.

  8. When Xcode launches, select the Project name in the project navigator to open the project editor.

    images/ios_cliBuild6.png
  9. On the General tab in the project editor, verify the Deployment Info Target is set to 11.0 or higher. 11.0 is the minimum Target version that does not use UIWebView.

    images/ios_cliBuild5.png
  10. Next, select your target platform. If you have access to the Mac and are able to connect a device to the machine, this can be your own iPhone or iPad device. If you do not have access to a device, or have not yet setup a provisioning profile, select one of the devices from the emulator list.

    images/target_platform.png
    When you are ready to build your application for deployment in the app store, the target platform must be "Generic iOS Device".
  11. Build your application. Under the Product menu, select Build. If it builds with no errors, you are ready to test your application.

    images/ios_cliBuild7.png

Testing your Application

Xcode includes an emulator you can use to test your application without needing to install it on a device. To use the emulator, you must first select a target device from the iOS Simulators section of the target platform dropdown.

images/target_platform.png
images/ios_simulators.png

After selecting a simulator, click the Run button to start the simulator and run your application.

images/run_simulator.png

When the simulator launches, the icon for it will appear in app tray at the bottom of the screen. Click the icon to open the simulator.

images/simulator_icon.png

When you are done, you can close the simulator by selecting Quit Simulator from the Simulator menu.

images/close_simulator.png

If you have physical access to the machine, you can also install your application on a device with a free provisioning profile. To learn more, see Running Your App in the Simulator or on a Device (Apple)

If you do not have physical access to the Mac, then you can use TestFlight (Apple) or third-party service such as Diawi (Diawi) to install and test your application on a device. This may require an Apple Developer Account (Apple).

Videos

Alpha Anywhere Cordova iOS 13 App Development

In this video, we discuss building iOS Cordova applications for iOS 13 using WkWebView with the Alpha Anywhere integrated Cordova Builder and Xcode. This video shows how to build applications on a Mac as well as using the MacInCloud (MacInCloud) service.

2020-04-01

See Also